<template>
	<view>
		<!-- 单独返回按钮 -->
		<view style="position: fixed;z-index: 999;" :style="{Top: menuButtonInfo.top+'px'}">
			<view class="dio-column custom_back custom_back_radius" @click.stop="back">
				<image style="height: 28rpx;width: 16rpx;margin-right: 4rpx;" src="/static/dio-head/left14@2x.png"></image>
			</view>
		</view>
		<!-- 下滑后出现的顶部菜单栏 -->
		<view v-show="isShowHead" class="dio-column custom_head main_yellow_color" :style="{paddingTop: menuButtonInfo.top+'px',opacity:header_bg_op}">
			<view class="dio-row">
				<view class="dio-column custom_back" @click.stop="back">
					<image style="height: 28rpx;width: 16rpx;margin-right: 4rpx;" src="/static/dio-head/left14@2x.png"></image>
				</view>
			</view>
			
			<view class="dio-row" style="margin-top: 8rpx;justify-content: space-around;font-size: 30rpx;color:#FFFFFF;padding-bottom: 10rpx;font-weight: 600;">
				<view :class="{baby_underline:top_column==1}" @click="cut_column(1)">
					宝贝
				</view>
				<view :class="{baby_underline:top_column==2}" @click="cut_column(2)">
					详情
				</view>
				<view :class="{baby_underline:top_column==3}" @click="cut_column(3)">
					推荐
				</view>
			</view>
			<!-- <view class="custom_back">
				<image style="height: 28rpx;width: 16rpx;margin-right: 4rpx;" src="/static/dio-head/left14@2x.png"></image>
			</view> -->
		</view>
		
		
		<view class="" style="width: 100%;">
			<swiper style="height: 700rpx;" indicator-dots circular="true">
				<swiper-item v-for="(v,k) in swiper_list" :key="k">
					<view class="" style="width: 100%;height: 100%;">
						<image style="width: 100%;height: 100%;" mode="aspectFill" :src="v.src"></image>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		<view class="" style="background-color: #F0F0F0;padding: 20rpx 10rpx 10rpx 10rpx;">
			<view class="" style="background-color: #FFFFFF;border-radius: 14rpx;margin-bottom: 20rpx;padding: 20rpx;">
				<view class="dio-row moeny_box">
					<view class="money_icon">
						￥
					</view>
					<view class="money_num">
						68888
					</view>
				</view>
				<text class="detail_title gapTop10">
					三星980pro/970/2T台式机M2笔记本NVME固态硬盘
				</text>
				<view class="dio-row gapTop10" style="justify-content: space-around;">
					<view class="dio-row" style="align-items: center;">
						<image class="" style="width: 48rpx;height: 48rpx;" src="/static/icon/detail_live.png"></image>
						<text class="recommend_text" style="margin-left: 10rpx;">推荐</text>
					</view>
					<view class="dio-row" style="align-items: center;">
						<image class="detail_sharn_img" src="/static/icon/detail_tuck.png"></image>
						<text class="recommend_text" style="margin-left: 10rpx;">收藏</text>
					</view>
					<view class="dio-row" style="align-items: center;position: relative;">
						<image class="detail_sharn_img" src="/static/icon/detail_sharn.png" mode=""></image>
						<text class="recommend_text" style="margin-left: 10rpx;">分享</text>
						<button class="app_share_button" open-type="share"></button>
					</view>
				</view>
			</view>
			<view class="" style="background-color: #FFFFFF;border-radius: 14rpx;margin-bottom: 20rpx;padding: 20rpx;">
				<view class="dio-row" v-for="(v,k) in motoArgs.args" :key="k">
					<view class="" style="font-size: 28rpx;color: #9A9A9A;width: 200rpx;flex-shrink: 0;">
						{{v.k}}
					</view>
					<view class="" style="font-size: 30rpx;color:#111111;">
						{{v.v}}
					</view>
				</view>
			</view>
		</view>
		<view id="bbb" class="dio-row" style="padding-bottom: 20rpx;background-color: #F0F0F0;color: #666666;font-size: 30rpx;align-items: center;justify-content: center;">
			<view class="" style="width: 120rpx;height: 1rpx;background-color: #DDDDDD;"></view>
			<text style="margin: 0 40rpx;">宝贝详情</text>
			<view class="" style="width: 120rpx;height: 1rpx;background-color: #DDDDDD;"></view>
		</view>
		<view class="">
			<image style="width: 100%;display: block;" mode="widthFix" :src="v.src" v-for="(v,k) in swiper_list" :key="k"></image>
		</view>
		<!-- <dio-head :argu="head_argu"></dio-head> -->
	<!-- 	<view @click="ces" style="height: 2100px;">
			nihao
		</view> -->
		<view class="" style="background-color: #F0F0F0;">
			<view id="bbb" class="dio-row" style="padding-top: 20rpx;padding-bottom: 20rpx;color: #666666;font-size: 30rpx;align-items: center;justify-content: center;">
				<view class="" style="width: 120rpx;height: 1rpx;background-color: #DDDDDD;"></view>
				<text style="margin: 0 40rpx;">推荐</text>
				<view class="" style="width: 120rpx;height: 1rpx;background-color: #DDDDDD;"></view>
			</view>
			<dio-footList></dio-footList>
		</view>
		
		
		<!-- 底部导航栏 -->
		<view class="foot_shop_hight">
			
		</view>
		<view class="dio-row foot_shop_hight foot_shop">
			<view class="dio-row foot_btn_c">
				<view class="dio-column foot_one_box">
					<image class="foot_btn_icon" src="/static/icon/shop.png"></image>
					<text class="foot_title">店铺</text>
				</view>
				
				<view class="dio-column foot_one_box">
					<image class="foot_btn_icon" src="/static/icon/weixin.png"></image>
					<text class="foot_title">微信</text>
				</view>
				<view class="dio-column foot_one_box">
					<image class="foot_btn_icon" src="/static/icon/phone.png"></image>
					<text class="foot_title">手机</text>
				</view>
				<view class="dio-column foot_one_box">
					<image class="foot_btn_icon" src="/static/icon/detail_tuck.png"></image>
					<text class="foot_title">收藏</text>
				</view>
				<view class="dio-row" style="flex-grow: 10;height: 100%;margin-left: 20rpx;">
					<view class="dio-row" style="width: 100%;height: 100%;border-radius: 50rpx;background-color: #9A9A9A;">
						<view class="foot_buy_left_btn">
							<view class="foot_buy_title">
								担保购车
							</view>
						</view>
						<view class="foot_buy_right_btn">
							<view class="foot_buy_title">
								分期购
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	let isTopClick = false;
	export default {
		data() {
			return {
				menuButtonInfo:menuButtonInfo,
				// 透明
				header_bg_op:0,
				// 是否展示头部
				isShowHead:false,
				// 顶部选项
				top_column:1,
				// 宝贝详情字样位置信息
				detail_rect_top:0,
				// 推荐字样位置信息
				recommend_rect_top:0,
				
				head_argu:{
					name:"详情页",
					top:true,
					bgColor:"transparent",
					color:"#000",
					yidong:false,
					fanhui:false
				},
				swiper_list:[
					{
						src:"http://rkvlbrp6r.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221105204737.jpg"
					},
					{
						src:"http://rkvlbrp6r.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221105204807.jpg"
					},
					{
						src:"http://rkvlbrp6r.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221105204812.jpg"
					},
					{
						src:"http://rkvlbrp6r.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221105204815.jpg"
					}
				],
				motoArgs:{
					type:"moto",
					args:[
						{k:"看车地点",v:"梅州兴宁永动机车"},
						{k:"车牌归属",v:"梅州（粤M）"},
						{k:"首次上牌",v:"2022-05"},
						{k:"行驶里程",v:"200km"},
						{k:"排量",v:"250cc"},
						{k:"类型",v:"跑车"},
						{k:"过户次数",v:"0"},
						{k:"报废时间",v:"2034-05"},
						{k:"环保标准",v:"国四"},
					]
				}
			}
		},
		onLoad() {
			
			
		},
		onReady() {
		},
		onPageScroll(e) {
			// return
			if (isTopClick) return;
			if (e.scrollTop == 0) {
				this.isShowHead = false;
			}else{
				this.isShowHead = true;
			}
			// 控制头部是否透明 start
			if (e.scrollTop <= 300) {
				this.header_bg_op = e.scrollTop * 0.0033;
			}else{
				this.header_bg_op = 1;
			}
			// 控制头部是否透明 end
			
			uni.createSelectorQuery().selectAll("#bbb").boundingClientRect(rect=>{
				var detail_rect_top = rect[0].top- this.menuButtonInfo.top - 60 - 20;
				var recommend_rect_top = rect[1].top- this.menuButtonInfo.top - 60;
				// console.log("详情页布局",rect,detail_rect_top,e.scrollTop);
				this.detail_rect_top = detail_rect_top + e.scrollTop;
				this.recommend_rect_top = recommend_rect_top + e.scrollTop;
				if (detail_rect_top > 0) {
					this.top_column = 1
				}else if (recommend_rect_top > 0){
					this.top_column = 2
				}else{
					this.top_column = 3
				}
			}).exec();
		},
		methods: {
			// 返回按钮
			back(){
				console.log("返回")
				uni.navigateBack({
					delta: 1
				})
			},
			// 切换栏目 宝贝，详情，推荐
			cut_column(num){
				isTopClick = true;
				switch (num){
					case 1:
						uni.pageScrollTo({
							scrollTop:0,
							success() {
								isTopClick = false;
							}
						})
						break;
					case 2:
						uni.pageScrollTo({
							scrollTop:this.detail_rect_top,
							success() {
								isTopClick = false;
							}
						})
						break;
					case 3:
						uni.pageScrollTo({
							scrollTop:this.recommend_rect_top,
							success() {
								isTopClick = false;
							}
						})
						break;
					default:
						break;
				}
				this.top_column = num;
			}
		}
	}
</script>

<style scoped lang="scss">
	.baby_underline {
		color: #EB5089;
		position: relative;
	}
	.baby_underline::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 4rpx;
		background-color: #EB5089;
		bottom: -8rpx;
		left: 0;
	}
	.app_share_button{
		background-color: transparent;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.custom_head{
		// flex-direction: row;
		position: fixed;
		// height: 32px;
		width: 100%;
		z-index: 1000;
		left: 0;
		padding-bottom: 10rpx;
	}
	.custom_back_radius{
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .6);
	}
	.custom_back{
		margin-left: 20rpx;
		height: 32px;
		width: 32px;
		justify-content: center;
		align-items: center;
	}
	
	
	.moeny_box {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #EC5D29;
		font-weight: 800;
		margin-top: 5rpx;
		.money_icon{
			font-size: 28rpx;
		}
		.money_num {
			font-size: 46rpx;
		}
	}
	.detail_sharn_img {
		width: 32rpx;
		height: 32rpx;
	}
	
	.detail_title{
		font-size: 32rpx;
		font-weight: 600;
	}
	.gapTop10{
		margin-top: 10rpx;
	}
	
	.recommend_text {
		font-size: 24rpx;
		color: #999999;
	}
	.foot_shop_hight {
		height: 160rpx;
	}
	.foot_shop{
		background-color: #FFFFFF;
		position: fixed;
		z-index: 9999;
		bottom: 0;left: 0;
		width: 100%;
		.foot_btn_c{
			align-items: center;
			padding: 0 10rpx;
			margin-top: 14rpx;
			width: 100%;
			height:80rpx;
			.foot_buy_left_btn{
				border-radius: 50rpx 0 0 50rpx;
				background-image: linear-gradient(to bottom right,#F6C944,#F19D38);
				flex-basis: 50%;
			}
			.foot_buy_right_btn{
				border-radius: 0 50rpx 50rpx 0;
				background-image: linear-gradient(to bottom right,#EE7C30,#EB5B29);
				flex-basis: 50%;
			}
			.foot_buy_title{
				font-size: 30rpx;
				text-align: center;
				line-height: 78rpx;
				letter-spacing: 4rpx;
				color: #FFFFFF;
				font-weight: 800;
			}
			.foot_one_box {
				flex-grow: 1;
				align-items: center;
				.foot_btn_icon{
					width: 32rpx;
					height: 32rpx;
				}
				.foot_title {
					font-size: 24rpx;
					color: #6C6C6C;
					margin-top: 6rpx;
				}
			}
			
		}
		
	}
	
	

</style>
